<template>
  <div class="content">
    <el-form class="form-inline" :model="formInline" :inline="true">
      <el-form-item label="操作人">
        <el-input v-model="formInline.userName" placeholder="请输入操作人"></el-input>
      </el-form-item>
      <el-form-item class="form-button">
        <el-button type="primary" @click="goSubmit">查询</el-button>
        <el-button @click="goReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" style="width: 100%;margin-top: 20px;">
      <el-table-column prop="name" label="日记名称"></el-table-column>
      <el-table-column prop="url" label="链接地址"></el-table-column>
      <el-table-column prop="ipAddress" label="IP地址"></el-table-column>
      <el-table-column prop="userName" label="用户账号"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.state === 0 ? 'success' : 'danger'">
            {{ row.state === 0 ? '正常' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template>
          <el-button size="small" type="danger" @click="handleDelete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" :current-page="currentPage"
        layout="total, prev, pager, next, sizes, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { LogPageResponse, getLogPageListAPI, deleteLogAPI } from '@/api/log'
import type { LogItem } from '@/types'


// 日志数据
const dataList = ref<LogItem[]>([])

// 查询表单
const formInline = reactive({
  userName: '',
})

// 查询
const goSubmit = () => {
  currentPage.value = 1
  loadLogList()
}
// 重置
const goReset = () => {
  formInline.userName = ''
  currentPage.value = 1
  loadLogList()
}
// 删除
const handleDelete = async (row: LogItem) => {
  try {
    await ElMessageBox.confirm('确定删除该操作日志吗？', '提示', {
      type: 'warning'
    })
    await deleteLogAPI(row.id!)
    ElMessage.success('删除成功')
    loadLogList()
  } catch (error) {
    console.log("删除取消或出错:", error)
  }
}
// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadLogList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadLogList()
}
// 加载日志列表
const loadLogList = async () => {
  try {
    const response: LogPageResponse = await getLogPageListAPI({
      page: currentPage.value,
      pageSize: pageSize.value,
      userName: formInline.userName || undefined
    })

    if (response.code === 200) {
      dataList.value = response.result?.dataList || []
      total.value = response.result?.pageTotal || 0
    } else {
      ElMessage.error(response.message || '加载失败')
    }
  } catch (error) {
    console.error('加载操作日志失败:', error)
    ElMessage.error('加载操作日志失败')
  }
}

// 初始化
onMounted(() => {
  loadLogList()
})
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background-color: #ffffff;
  padding: 20px;
}

.form-inline {
  margin-left: 10px;
  border-radius: 4px;
}

.el-input {
  width: 300px;
}

.form-button {
  float: right;
}

.form-button .el-button {
  margin-right: 10px;
}

:deep(.el-table) {
  border: 1px solid #ebeef5;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #101010;
  font-weight: 600;
  text-align: center;
}

:deep(.el-table td) {
  padding: 12px 0;
  text-align: center;
}

:deep(.el-button) {
  margin-right: 8px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
